<template lang="pug">
view.w-full(:style="warpStyle")
view.fixed.w-full.top-0.bg-white.z-50(:style="warpStyle")
  .nav-bar(:style="navBarSyle")
    .flex-1
    .search-bar(@click="nav()")
      .text-gray-500.mr-2(class="i-lucide-search")
      .text-gray-500.text-sm 点击搜索

  
</template>
<script setup lang="ts">
import { useSystemInfo } from "@/stores/systemInfo";
import { StyleValue, computed,ref } from 'vue'
const systemInfo = useSystemInfo();
const { navBarInfo } = storeToRefs(systemInfo)
const warpStyle = computed<StyleValue>(() => {
  const {navBarHeight} = navBarInfo.value
  return {
    height:`${navBarHeight}px`
  }
})
const navBarSyle = computed<StyleValue>(() => {
  const {menuHeight,menuTop,maxWidth} = navBarInfo.value
  return {
    height:menuHeight+'px',
    top:`${menuTop}px`,
    width:`${maxWidth}px`
  }
})
 
function nav() {
  uni.navigateTo({
    url:'/pages/search'
  })
}
</script>
<style scoped lang="scss">
.nav-bar{
  @apply flex items-center  absolute justify-between;
}
.search-bar{
  @apply h-full rounded-full bg-gray-100 flex items-center px-4 w-[75%] mr-4;
}
</style>